<template>
  <!-- 门户页 -->
  <main class="main">
    <!-- 侧边栏 -->
    <aside>
      <div class="side-item" @click.stop="login()">
        <i class="iconfont icon-denglu" />
        <span>
          <a href="javascript:;">登录</a>
        </span>
      </div>
      <div class="side-item" @mouseover="isPhone = true" @mouseout="isPhone = false">
        <i class="iconfont icon-tousu" />
        <span>
          <a v-if="!isPhone" href="javascript:;">服务电话</a>
          <a v-else href="javascript:;">0311-85811275</a>
        </span>
      </div>
      <div class="side-item">
        <i class="iconfont icon-app1" />
        <span>
          <a href="javascript:;">App下载</a>
        </span>
      </div>
      <div class="app-load">
        <vue-qr
          style="width: 100px;height:100px"
          :size="100"
          :margin="0"
          :auto-color="true"
          :dot-scale="1"
          :text="APPUrl"
        />
      </div>
    </aside>
    <!-- 头部 -->
    <header>
      <div class="position">
        <div class="logo-wrap">
          <div class="logo">
            <img src="@/assets/logo.png" alt>
            <div>
              <span>工程监管系统</span>
              <span>Project supervision</span>
            </div>
          </div>
          <!--          <CityPositioning class="city" />-->
        </div>
      </div>
    </header>
    <!-- 轮播图banners -->
    <div ref="bannerSwiper" class="swiper-container bannerSwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide banner-one">
          <img src="@/assets/image/banner01.jpg" alt>
        </div>
        <div class="swiper-slide">
          <img src="@/assets/image/banner02.jpg" alt>
        </div>
      </div>
      <!-- 分页器 -->
      <div class="swiper-pagination" />
      <!-- 导航按钮 -->
      <div class="swiper-button-prev swiper-button-white" />
      <div class="swiper-button-next swiper-button-white" />
    </div>
    <!-- 内容区一 -->
    <section class="first">
      <!-- 项目异常的企业 -->
      <div class="enterprise">
        <h3 class="title">
          <span>施工中的项目</span>
        </h3>
        <div>
          <vue-seamless-scroll v-if="projectList.length > 0" :data="projectList" :class-option="optionHover" class="enterprise-warp">
            <div v-for="(item, index) in projectList" :key="index" class="item">
              <div class="abnormal">
                <img src="@/assets/banners/4.png" alt>
              </div>
              <div class="info">
                <span class="time">{{ item.createTime }}</span>
                <p>项目名称：{{ item.proName }}</p>
                <p>{{ item.enterpriseName }}</p>
              </div>
            </div>
          </vue-seamless-scroll>
          <div v-else class="no-data">
            <p><svg-icon icon-class="no-data" class="no-data-icon" /></p>
            <p>暂无数据</p>
          </div>
        </div>
      </div>
      <!-- 通知公告 -->
      <div class="notice">
        <h3 class="title">
          <span>通知公告</span>
          <span class="more" @click="$router.push('/noticeList')">更多 ></span>
        </h3>
        <div @click="goNoticeDetail($event)">
          <vue-seamless-scroll v-if="noticeList.length > 0" :data="noticeList" :class-option="optionHover" class="notice-warp">
            <div v-for="(item, index) in noticeList" :key="index" class="item">
              <span :data-id="item.noticeId">{{ item.noticeTitle }}</span>
              <span :data-id="item.noticeId">{{ item.createTime }}</span>
            </div>
          </vue-seamless-scroll>
          <div v-else class="no-data notice-warp">
            <p><svg-icon icon-class="no-data" class="no-data-icon" /></p>
            <p>暂无数据</p>
          </div>
        </div>
        <el-row :gutter="10">
          <el-col :span="24">
            <button class="login-btn" @click="login()">
              <i class="iconfont icon-icon1" />会员登录
            </button>
          </el-col>
          <el-col :span="12">
            <button class="register-btn" @click="personRegister()">
              <i class="iconfont icon-huizhang" />个人注册
            </button>
          </el-col>
          <el-col :span="12">
            <button class="register-btn" @click="companyRegister()">
              <i class="iconfont icon-huizhang" />企业注册
            </button>
          </el-col>
        </el-row>
      </div>
    </section>
    <!-- 内容区二 -->
    <section class="second">
      <h3 class="title">
        <span>成员企业</span>
        <!--        <span class="more">更多></span>-->
      </h3>
      <div ref="memberSwiper" class="swiper-container memberSwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div v-if="enterpriseList.length >0 " class="line">
              <template v-for="item in enterpriseList">
                <el-tooltip :key="item.id" effect="dark" :content="item.name" placement="top-start">
                  <span class="item">{{ item.name }}</span>
                </el-tooltip>
              </template>
            </div>
            <div v-else class="no-data notice-warp">
              <p><svg-icon icon-class="no-data" class="no-data-icon" /></p>
              <p>暂无数据</p>
            </div>
          </div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination" />
      </div>
    </section>
    <!-- 底部 -->
    <div class="foot">
      <footer>
        <div class="left">
          <p>
            友情链接：
            <a href="javascript:;">中国河北</a>
            <span class="divide">丨</span>
            <a href="javascript:;">中佳勘察有限公司</a>
          </p>
          <p>联系我们</p>
          <p>地址：河北省石家庄市裕华区世纪华茂B座</p>
          <p>联系方式： 051-2238243</p>
          <p>邮箱：284701759@qq.com</p>
        </div>
        <div class="right">
          <p>扫一扫</p>
          <p>下载APP</p>
          <p class="app-code">
            <vue-qr
              style="width: 90px;height:90px"
              :size="100"
              :margin="0"
              :auto-color="true"
              :dot-scale="1"
              :text="APPUrl"
            />
          </p>
        </div>
      </footer>
    </div>
  </main>
</template>

<script>
import { getProList, getOrgnaztionList, getNoticeList } from '@/api/home'
// import CityPositioning from '@/components/CityPositioning'
import Swiper from 'swiper/swiper-bundle.min.js'
import 'swiper/swiper-bundle.min.css'
import vueQr from 'vue-qr'
export default {
  name: 'Main',
  components: { vueQr },
  data() {
    return {
      // APPUrl: process.env.VUE_APP_BASE_API + `/supervise/mobileInfo/download/newapk`, // App地址
      APPUrl: `http://124.239.176.45:12/supervise/mobileInfo/download/newapk`, // App地址
      isPhone: false,
      mySwiper: null,
      memberSwiper: null,
      projectList: [],
      noticeList: [],
      enterpriseList: [] // 成员企业类型
    }
  },
  computed: {
    optionHover() {
      return {
        step: 0.55, // 数值越大速度滚动越快
        limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  mounted() {
    console.log('测试负载均衡第二次')
    // banner轮播图
    this.setHomeSwiper()
    // 成员企业轮播图
    this.setMemberSwiper()
    // 获取项目列表
    this.getProList()
    // 获取通知公告
    this.getNoticeList()
    // 获取成员企业
    this.getEnterpriseList()
  },
  methods: {
    // 通知公告详情
    goNoticeDetail(e) {
      console.log(e.target.dataset.id)
      const id = e.target.dataset.id
      if (id) this.$router.push({ path: `/noticeDetail`, query: { id }})
    },
    // 获取项目列表
    getProList() {
      getProList().then(res => {
        const { data, data: { rows }} = res
        if (data) {
          this.projectList = rows
        }
      })
    },
    // 获取通知公告
    getNoticeList() {
      getNoticeList().then(res => {
        const { data } = res
        if (data) {
          this.noticeList = data
        }
      })
    },
    // 获取成员企业
    getEnterpriseList() {
      getOrgnaztionList().then(res => {
        const { data, data: { rows }} = res
        if (data) {
          this.enterpriseList = rows
        }
      })
    },
    // banner轮播图
    setHomeSwiper() {
      this.mySwiper = new Swiper(this.$refs.bannerSwiper, {
        direction: 'horizontal', // 切换选项
        loop: true, // 循环模式选项
        autoplay: true, // 自动播放
        // 分页器
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true // 分页器类型
        },
        // 前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
    },
    // 成员企业轮播图
    setMemberSwiper() {
      this.memberSwiper = new Swiper(this.$refs.memberSwiper, {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        // 分页器
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true // 分页器类型
        }
      })
    },
    // 登录
    login() {
      this.$router.push({ path: '/login' })
    },
    // 企业注册
    companyRegister() {
      this.$router.push({ path: '/EnterpriseRegister' })
    },
    // 个人注册
    personRegister() {
      this.$router.push({ path: '/register' })
    }
  }
}
</script>

